import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter, Link } from 'react-router-dom'
import { Menu } from 'antd'
import { addTag } from '@/store/actions'
import router from '@/router'
import SubMenu from 'antd/lib/menu/SubMenu'

class SiderMenu extends Component {
  state = {
    user: {},
    openMenu: [],
    openKey: [],
    menuTree: null
  }

  componentDidMount() {
    this.handleDefaultSelect()
    const menuTree = this.getMenuTree(router)
    this.setState({
      menuTree,
    })
  }

  getMenuTree = (router) => {
    const path = this.props.location.pathname

    return router.reduce((pre, item) => {
      if (!item.children) {
        pre.push(
          <Menu.Item key={item.path} icon={item.icon}>
            <Link to={item.path}>
              <span>{ item.title }</span>
            </Link>
          </Menu.Item>
        )
      } else {
        const cItem = item.children.find(_item => path.indexOf(_item.path) === 0)

        if (cItem) {
          this.setState(state => ({
            openKey: [...state.openKey, item.path]
          }))
        }

        pre.push(
          <SubMenu
            key={item.name}
            title={item.title}
            icon={item.icon}
          >
            {this.getMenuTree(item.children)}
          </SubMenu>
        )

      }

      return pre
    }, [])

  }

  // 刷新页面，处理默认选中
  handleDefaultSelect = () => {
    let menuConfigKeys = []
    router.forEach((item) => {
      menuConfigKeys.push(item.path)
    })
    const pathname = window.location.pathname
    const currentKey = '/' + pathname.split('/')[1]
    const currentMenu = this.selectBreadcrumb(currentKey, pathname)

    if (menuConfigKeys.indexOf(currentKey) !== -1) {
      this.setState({
        openMenu: [currentKey],
        openKey: [pathname],
      })
      this.props.handleClick(currentMenu)
    }
  };

  handleMenuClick(item) {
    const currentKey = '/' + item.key.split('/')[1]
    const pathname = item.key
    const currentMenu = this.selectBreadcrumb(currentKey, pathname)
    this.props.handleClick(currentMenu)

    this.setState({
      openMenu: [currentKey],
      openKey: [pathname]
    })
  }

  selectBreadcrumb(currentKey, pathname) {
    const currentMenu = []
    
    router.forEach((item) => {
      if (item.path === currentKey) {
        currentMenu.push({ title: item.title, path: pathname })
      }
      if (item.children) {
        item.children.forEach((sItem) => {
          if (sItem.path === pathname) {
            currentMenu.push({ title: sItem.title, path: pathname })
          }
        })
      }
    })
    return currentMenu
  }

  render() {
    const { menuTree, openMenu } = this.state
    const { pathname } = this.props.history.location

    return (
      <div className="app-sider-menu">
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[pathname]}
          defaultSelectedKeys={openMenu}
          onClick={ this.handleMenuClick.bind(this) }
        >
          { menuTree }
        </Menu>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    ...state.app
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    // addTag,
    handleClick(titleArray) {
      dispatch(addTag(titleArray))
    }
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(withRouter(SiderMenu))
